<template>
  <view class="container">
    <view>
      <u-navbar
        backIconColor="#fff"
        :background="background"
        height="50"
        :border-bottom="false"
        title-color="#333"
      ></u-navbar>
      <!-- <u-gap height="20" bg-color="#F0F1F2"></u-gap> -->
      <view class="contentBg" style="background-image: url(/static/store-bg.png)"> </view>
      <view class="mer-top">
        <view class="title">标准双人间</view>
        <u-line></u-line>
        <view class="des dis-flex">
          <view class="label">1张1.8米大床</view>
          <view class="label">1人入驻</view>
          <view class="label">可吸烟</view>
          <view class="label">1张1.8米大床</view>
          <view class="label">1人入驻</view>
          <view class="label">可吸烟</view>
          <view class="label">1张1.8米大床</view>
          <view class="label">1人入驻</view>
          <view class="label">可吸烟</view>
        </view>
        <u-line></u-line>
        <view class="content">
          <view class="item dis-flex">
            <view class="tl">食品饮品</view>
            <view class="value">瓶装水 电热水壶</view>
          </view>
          <view class="item dis-flex">
            <view class="tl">食品饮品</view>
            <view class="value">瓶装水 电热水壶</view>
          </view>
          <view class="item dis-flex">
            <view class="tl">食品饮品</view>
            <view class="value">瓶装水 电热水壶</view>
          </view>
          <view class="item dis-flex">
            <view class="tl">食品饮品</view>
            <view class="value">瓶装水 电热水壶</view>
          </view>
          <view class="item dis-flex">
            <view class="tl">食品饮品</view>
            <view class="value">瓶装水 电热水壶</view>
          </view>
          <view class="item dis-flex">
            <view class="tl">食品饮品</view>
            <view class="value">瓶装水 电热水壶</view>
          </view>
          <view class="item dis-flex">
            <view class="tl">食品饮品</view>
            <view class="value">瓶装水 电热水壶</view>
          </view>
          <view class="item dis-flex">
            <view class="tl">食品饮品</view>
            <view class="value">瓶装水 电热水壶</view>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed-wapper">
      <view class="bt-box dis-flex flex-y-between flex-y-center">
        <view class="count-price">
          <view class="price">
            <text class="y d">原价:¥</text>
            <text class="y n">178</text>
            <text class="v d">会员价:¥</text>
            <text class="v n">150</text>
          </view>
          <view class="point">20积分抵¥20</view>
        </view>
        <view @click="routeTo('/goods/order-confirm/hotel-order-confirm')" class="submit-btn">
          立即购买
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: 'transparent'
      }
    }
  },
  methods: {
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('@/style/btn.css');

.fixed-wapper {
  background-color: #fff;
  width: 100%;
  left: 0;
  .bt-box {
    height: 90rpx;
    padding-left: 4%;
    box-shadow: -1rpx -1rpx 2px 0px #eeeeef;
  }
  .count-price {
    .y {
      color: #333333;
    }
    .v {
      color: #fa453c;
    }
    .d {
      font-size: 26rpx;
    }
    .n {
      font-size: 32rpx;
      font-weight: 600;
      margin-right: 20rpx;
    }
    .point {
      font-size: 24rpx;
      color: #ff6f10;
    }
  }
  .submit-btn {
    width: 200rpx;
    height: 70rpx;
    line-height: 70rpx;
    margin-right: 4%;
  }
}

.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: 317rpx;
}

.mer-top {
  width: 100%;
  // height: 320rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  padding: 30rpx 20rpx 20rpx 20rpx;
  position: relative;
  margin-top: 30rpx;
  .title {
    font-weight: 600;
    font-size: 34rpx;
    color: #333333;
    margin-bottom: 30rpx;
  }
  .des {
    margin: 30rpx 0;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 24rpx;
    line-height: 48rpx;
    .label {
      min-width: 33%;
    }
  }
  .content {
    margin: 30rpx 0;
    .item {
      font-size: 26rpx;
      line-height: 72rpx;
      .tl {
        color: #666666;
        min-width: 140rpx;
      }
      .value {
        color: #333333;
      }
    }
  }
}
</style>
